<template>
  <div class="wrapper" @wheel.prevent="handleWheel">
    <div class="inner">
      <div
        class="card"
        v-for="(content, index) in card_contents"
        :key="index"
        :ref="setCardRef"
        :style="[getIndex(index)]"
      >
        <cardShowType1 :pram="content.cardContent"></cardShowType1>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import cardShowType1 from "@renderer/components/cards/show-type1/card-show-type1.vue";
import { CardSH1Pojo } from "@renderer/store/components/cards/card-show-type1";

interface CardList {
  cardContent: CardSH1Pojo;
  radian: number;
}

let rotation = 1;
const cardRefs: HTMLElement[] = [];
let radian_default = 1 / 3;
const card_contents: CardList[] = [
  {
    cardContent: new CardSH1Pojo({ bgColor: "#e91e63", title: "ToWav" }),
    radian: 0 * radian_default,
  },
  {
    cardContent: new CardSH1Pojo({
      bgColor: "#4c1e50",
      title: "UEC++",
    }),
    radian: 1 * radian_default,
  },
  {
    cardContent: new CardSH1Pojo({
      bgColor: "#1b70c5e3",
      title: "cnm",
    }),
    radian: 2 * radian_default,
  },
];

const getIndex = (i: number) => {
  return `--initAngle: ${card_contents[i].radian}turn;`;
};

function setCardRef(el: any) {
  if (el) {
    cardRefs.push(el);
  }
}

const handleWheel = (e: WheelEvent) => {
  // 向下滚动
  if (e.deltaY > 0) {
    rotation = -1;
  }
  // 向上滚动
  else {
    rotation = 1;
  }
  updateCardStyles();
};

const updateCardStyles = () => {
  for (let i = 0; i < cardRefs.length; i++) {
    const card = cardRefs[i];
    const radian = rotation * radian_default;
    card.style["transform"] = `rotateY(calc(${
      card_contents[i].radian + radian
    }turn)) translateZ(var(--translateZ))`;
    card_contents[i].radian += radian;
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  @include rel_cen_fwh;
  overflow: hidden;
}

.inner {
  --w: 100px;
  --h: 150px;
  --translateZ: calc((var(--w) + var(--h)) + 0px);
  --rotateX: -15deg;
  --perspective: 500px;
  position: absolute;
  width: var(--w);
  height: var(--h);
  top: 30%;
  left: calc(50% - (var(--w) / 2) - 2.5px);
  z-index: 2;
  transform-style: preserve-3d;
  transform: perspective(var(--perspective));
  // transform: perspective(var(--perspective)) rotateX(var(--rotateX))
  // rotateY(1turn);
  // animation: rotating 20s linear infinite; /* */
}
@keyframes rotating {
  from {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(0);
  }
  to {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(1turn);
  }
}

.card {
  position: absolute;
  border: 2px solid var(--color-card);
  border-radius: 12px;
  // overflow: hidden;
  inset: 0;
  transition: transform 1s ease-in-out; // 添加过渡效果
  transform: rotateY(var(--initAngle)) translateZ(var(--translateZ));
  width: 100px;
  height: 150px;
}
</style>
